<!--
  - Copyright(c)  2022 厦门外里科技有限公司 All rights reserved.
  -
  - https://www.wailikeji.com
  -
  - 版权所有，侵权必究！
  -->

<template>
	<view class="scrool-page">
		<view class="wrap">
			<view class="header">
				<view style="display: flex;">
					<view class="header-item">
						<view class="header-item-value">{{ teamNum?teamNum:0 }}
						</view>
						<view class="header-item-desc">人数
						</view>
					</view>
					<view class="header-item">
						<view class="header-item-value">
							{{totalIncome?totalIncome :0}}
						</view>
						<view class="header-item-desc">总收益</view>
					</view>
				</view>
				<button class="yaoqing_btn" @click="navTo('./share2')">邀请好友</button>
			</view>
			<!-- 切换卡 -->
			<view class="u-tabs-box">
				<!-- is-scroll(默认为true)，配置tabsSwiper组件的内容是否可以左右拖动,一般4个标签以下时，无需拖动，设置为false，
            5个标签以上，建议可以左右拖动-->
				<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="swiperItemList" :current="current"
					@change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(swiperItem, swiperIndex) in swiperItemList"
					:key="swiperItem.id">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="loadMore"
						lower-threshold="10upx">
						<view class="page-box">
							<view class="item-header">
								<view style="width: 34%; ">ID</view>
								<view style="width: 33%; ">团队人数</view>
								<view style="width: 33%; ">累计贡献</view>
							</view>
							<view class="item-data" v-for="(item, index) in swiperItem.itemList" :key="index">
								<view style="width: 34%;">
									{{ item.userId }}
								</view>
								<view style="width: 33%;">
									{{item.teamNum }}
								</view>
								<view style="width: 33%;font-size: 32upx;color: #FF580B;">
									{{ (item.teamContribute+ item.personalContribute)? (item.teamContribute +item.personalContribute)+ '元' : '0元' }}
								</view>
							</view>

							<u-loadmore v-if="swiperItem.itemList.length>12"
								:status="getCurSwiperItem(swiperItem.id).loadStatus" bgColor="#f2f2f2">
							</u-loadmore>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				teamNum: 0, //团队人数
				totalIncome: 0, //总收益
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				itemData: {},
				newSharePercent: 0, //新的分成比例
				swiperItemList: [{
						id: 1,
						relationType: 1,
						name: '直邀',
						loadStatus: 'loadmore',
						curPage: 0,
						total: 0,
						itemList: [],
						totalIncome: 0
					},
					{
						id: 2,
						relationType: 2,
						name: '间邀', //标题
						loadStatus: 'loadmore', //加载状态
						curPage: 0, //当前页码
						total: 0, //总数
						itemList: [],
						totalIncome: 0
					},
				],

			};
		},
		onLoad() {

		},
		onShow() {
			if (this.getCurSwiperItem().itemList.length === 0) {
				this.loadMore()
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.refresh()
		},
		methods: {
			/**
			 * 跳转路由
			 * @param {Object} url
			 */
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			/**
			 * 确定修改分成比例
			 */
			chagePercentSureHandler(userId) {
				this.$api.api('user.changeSharePercent', {
						"userId": userId,
						"sharePercent": this.newSharePercent
					})
					.then(res => {
						if (res.code === 200) {
							this.swiperItemList[0].loadStatus = "loadmore"
							this.swiperItemList[0].total = 0
							this.swiperItemList[0].itemList = []
							this.swiperItemList[1].loadStatus = "loadmore"
							this.swiperItemList[1].total = 0
							this.swiperItemList[1].itemList = []
							this.changePercentShow = false
							this.loadMore()
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
					})
			},
			/**
			 * 点击详情
			 * @param {Object} itemData
			 */
			detailHandler(itemData) {
				this.userDetailShow = true
				this.itemData = itemData
			},
			/**
			 * 获取成员关系
			 * @param {Object} upUserId
			 */
			getRelation(upUserId) {
				if (upUserId === this.$store.state.user.userInfo.id) {
					return "直邀"
				} else {
					return "间邀"
				}
			},

			/**
			 * 刷新
			 */
			refresh() {
				this.clear()
				this.loadMore()
			},
			/**
			 * 获取当前活跃选项卡数据
			 * @param {Object} current
			 */
			getCurSwiperItem(current) {
				if (current) {
					return this.swiperItemList[current];
				}
				return this.swiperItemList[this.current];
			},
			clear() {
				this.getCurSwiperItem().itemList = []
				this.getCurSwiperItem().curPage = 0
				this.getCurSwiperItem().loadStatus = 'loadmore'
				this.userDetailShow = false
				this.teamNum = 0
				this.totalIncome = 0
			},
			/**
			 * 加载更多
			 */
			loadMore() {
				if (this.getCurSwiperItem().loadStatus == 'nomore') {
					return
				}
				//加载中
				this.getCurSwiperItem().loadStatus = 'loading';
				let page = this.getCurSwiperItem().curPage + 1
				this.$api.api('user.teamList', {
						"relationType": this.getCurSwiperItem().relationType,
						"pageNum": page,
						"pageSize": 10,
						"orderByColumn": "createTime",
						"isAsc": "descending"
					})
					.then(res => {
						if (res.code === 200) {
							this.swiperItemList[this.current].itemList = this.swiperItemList[this.current].itemList
								.concat(res.data.teamList)
							console.log("aaa",this.swiperItemList)
							this.swiperItemList[this.current].total = res.data.total
							this.teamNum = res.data.teamNum;
							this.swiperItemList[this.current].totalIncome = res.data.totalIncome
							this.totalIncome = res.data.totalIncome;
							if (res.data.total > this.swiperItemList[this.current].itemList.length) {
								this.getCurSwiperItem().loadStatus = 'loadmore';
								this.getCurSwiperItem().curPage++;
							} else {
								this.getCurSwiperItem().loadStatus = 'nomore';
							}
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
						uni.stopPullDownRefresh(); //停止下拉刷新动画
					})
			},
			/**
			 * tabs通知swiper切换
			 * tab栏切换
			 * @param {Object} index
			 */
			change(index) {
				this.swiperCurrent = index;
			},
			/**
			 * swiper-item左右移动，通知tabs的滑块跟随移动
			 * @param {Object} e
			 */
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabs.setDx(dx);
			},
			/**
			 * 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			 * swiper滑动结束，分别设置tabs和swiper的状态
			 * @param {Object} e
			 */
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				if (this.swiperItemList[this.current].itemList.length === 0) {
					this.loadMore()
				}
				this.teamNum = this.swiperItemList[this.current].total;
				this.totalIncome = this.swiperItemList[this.current].totalIncome;
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background: #f8f8f8;
	}

	.scrool-page {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
		touch-action: none;
	}

	.swiper-item {
		height: 100%;
		touch-action: none;
	}


	.header {
		background-color: #ffffff;
		width: 93%;
		height: 300upx;
		margin-left: 26upx;
		border-radius: 20upx;
		margin-top: 20upx;
		box-shadow: 0 2upx 2upx rgba(183, 183, 183, 0.3); //周边阴影
		margin-bottom: 20upx;

		.header-item {
			margin-top: 70upx;
			height: 100upx;
			width: 50%;
			text-align: center;

			.header-item-value {
				font-size: 40upx;
				color: #333333;
			}

			.header-item-desc {
				font-size: 28upx;
				color: #666666;
				margin-left: 20upx;
			}
		}
	}


	.yaoqing_btn {
		width: 80%;
		line-height: 80upx;
		margin-top: 30upx;
		height: 85upx;
		color: #FFFFFF;
		background: #FD6416;
		background-size: 100%;
	}

	.detail_btn {
		width: 118upx;
		line-height: 50upx;
		color: #FFFFFF;
		font-size: 30upx;
		background: #FD6416;
	}

	.change-btn {
		width: 180upx;
		line-height: 70upx;
		color: #FFFFFF;
		font-size: 30upx;
		background: #FD6416;
	}

	.page-box {
		background-color: #ffffff;
		width: 93%;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;

		margin-left: 26upx;
		margin-top: 20upx;

		box-shadow: 0 2upx 2upx rgba(183, 183, 183, 0.3); //周边阴影
		border-radius: 20upx;
		margin-bottom: 50upx;
	}

	.item-header {
		display: flex;
		padding-top: 20upx;
		padding-bottom: 20upx;
		text-align: center;
	}

	.item-data {
		display: flex;
		padding-top: 20upx;
		padding-bottom: 20upx;
		text-align: center;
	}
</style>
